<template>
    <el-table :data="userStore.tableData" style="width: 100%">
        <el-table-column prop="id" label="编号">
        </el-table-column>
        <el-table-column label="账号" prop="username">
        </el-table-column>
        <el-table-column prop="nickName" label="姓名">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间">
            <template #default="scope">
                {{ fmtData(scope.row.createTime) }}
            </template>
        </el-table-column>
        <el-table-column prop="loginTime" label="最后登录">
            <template #default="scope">
                {{ fmtData(scope.row.loginTime) }}
            </template>
        </el-table-column>
        <el-table-column label="是否启用">
            <template #default="scope">
                <el-switch @change="changeFn(scope.row)" v-model="scope.row.status" :active-value="1"
                    :inactive-value="0" />
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">分配角色</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <ElConfigProvider :locale="zhCn">
        <div class="demo-pagination-block">
            <el-pagination v-model:currentPage="userStore.search.pageNum" v-model:page-size="userStore.search.pageSize"
                :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="userStore.total"
                @size-change="handleSizeChange(userStore.total, userStore.search.pageSize, userStore.search.pageNum)"
                @current-change="handleCurrentChange(userStore.total, userStore.search.pageSize, userStore.search.pageNum)" />
        </div>
    </ElConfigProvider>
</template>
  
<script lang="ts" setup>
import { user } from "@/api"
// import { reactive, toRefs } from "vue";
import { fmtData } from "@/utils"
import { ElMessage } from "element-plus"
import { useUserStore } from "@/store/user";
import { ref } from "vue";
import { ElConfigProvider } from 'element-plus';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
const userStore = useUserStore()

userStore.listFn()


const changeFn = (val: Istatus) => {
    user.UpdateStatusApi(val).then(res => {
        ElMessage({
            message: res.message,
            type: res.code === 200 ? "success" : "error",
        });
        console.log(res);
    }).catch(err => {
        // 第一种
        let target = userStore.tableData.find(item => item.id == val.id)
        target && (target.status = val.status === 1 ? 0 : 1)
        // 第二种
        // val.status === 1 ? 0 : 1
    })
}


const handleEdit = (index: number, row: IuserList) => {
    console.log(index, row)
}
const handleDelete = (index: number, row: IuserList) => {
    console.log(index, row)
}

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (total: number, pageSize: number, pageNum: number) => {
    userStore.listFn();
    console.log(total, pageSize, pageNum, "size");

    if ((total % pageSize !== 0) && (Math.floor(total / pageSize) + 1 == pageNum)) {
        console.log(111);

        ElMessage.warning("没有更多了")
    }


}
const handleCurrentChange = (total: number, pageSize: number, pageNum: number) => {
    userStore.listFn()
    console.log(total, pageSize, pageNum, "Current");
    if ((total % pageSize !== 0) && (Math.floor(total / pageSize) + 1 == pageNum)) {
        console.log(111);

        ElMessage.warning("没有更多了")
    }
}

// let { tableData } = toRefs(state)
</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
  